<template>
    <div class="offcanvas offcanvas-end" style="--bs-offcanvas-width: 50%;" tabindex="-1" id="offcanvasRight"
        aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasRightLabel">智能管理助手</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <!-- 模拟对话历史 -->
            <div class="chat-history">
                <div v-if="messages.length == 0">
                    <div class="chat-message ai">
                        请输入您想要查询的问题或操作
                    </div>
                </div>
                <div v-for="(item, index) in messages" :key="index" class="chat-message"
                    :class="{ 'user': isUserMsg(item), 'ai': isIntelMsg(item) }">
                    <div v-if="isUserMsg(item)" class="message-content">{{ item.msg }}</div>
                    <div v-else>
                        <div v-if="checkLoading(item as intelmsg)" class="message-content">
                            智能助手还在学习，不理解您正在询问的操作，请反馈客服：
                            <a href="www.baidu.com" class="customer-service">客服小助手</a>
                        </div>
                        <div v-else class="message-content">
                            <div>您可能想做的操作为：</div>
                            <div v-for="(oper, index) in item.opers" :key="index" class="operation">
                                <div class="operation-title-and-button">
                                    <div class="operation-title">{{ oper.title }}</div>
                                    <button @click="clickToConsole(oper.id, oper.value)" class="btn btn-operation">
                                        一键设置
                                    </button>
                                </div>
                                <div class="operation-msg">{{ oper.msg }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chat-message ai" v-if="isLoading">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    正在为您搜索，请稍后
                </div>
            </div>

            <!-- 用户输入区域 -->
            <div class="input-group mb-3">
                <textarea type="text" class="form-control textarea-control-md" v-model="userInput" @keyup.enter="clickToQuery"  
                    style="width: 100%; height: 10vh; padding: 10px; box-sizing: border-box; text-align: left;"
                    placeholder="输入您的问题..."></textarea>
                <div class="input-group-append">
                    <button :disabled="isLoading"  @click="clickToQuery" class="btn btn-send">发送</button>
                    <button @click="rollback" class="btn btn-rollback">回滚</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
/* 侧边栏样式 */
.offcanvas {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

/* 标题栏样式 */
.offcanvas-header {
    padding: 10px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e7e7e7;
}

/* 标题样式 */
.offcanvas-title {
    margin: 0;
    font-size: 16px;
    color: #333;
}

/* 关闭按钮样式 */
.btn-close {
    background: gray;
    border: none;
    color: black;
}

/* 聊天历史样式 */
.chat-history {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* 聊天消息样式 */
.chat-message {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    max-width: 70%;
}

.chat-message.user {
    background-color: #007bff;
    color: white;
    align-self: flex-end;
}

.chat-message.ai {
    background-color:rgba(108, 117, 125, 0.6);
    color: white;
    align-self: flex-start;
    
}

/* 消息内容样式 */
.message-content {
    font-size: 14px;
}

/* 客服链接样式 */
.customer-service {
    color: #007bff;
    text-decoration: none;
}

.customer-service:hover {
    text-decoration: underline;
}

/* 操作样式 */
.operation {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.operation-title-and-button {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 修改为 flex-start 使元素靠左对齐 */
    gap: 10px; /* 添加 gap 属性来控制元素之间的间距 */
}

.operation-title {
    font-weight: bold;
    margin-bottom: 5px;
    flex: 1;
}

/* 操作消息样式 */
.operation-msg {
    font-size: 14px; /* 增加字体大小 */
    color: #333; /* 更深的颜色以提高可读性 */
}

/* 操作按钮样式 */
.btn-operation {
    background-color: #009688 !important; /* 增加饱和度并使用 !important 确保优先级 */
    color: white !important; /* 文字颜色为白色 */
    border: 1px solid #00796b !important; /* 添加边框以区分按钮 */
    padding: 8px 15px;
    font-size: 16px; /* 增加字体大小 */
    cursor: pointer;
    border-radius: 5px;
    outline: none;
    box-shadow: 0 2px #005a50;
    transition: all 0.3s ease;
    width: auto; /* 使按钮宽度自适应 */
    white-space: nowrap; /* 防止按钮内容换行 */
    position: relative; /* 相对定位 */
    z-index: 1; /* 确保按钮在上层 */
}


.btn-operation:hover {
    background-color: #00796b !important; /* 悬停时的颜色 */
}


/* 输入区域样式 */
.input-group {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    padding: 10px;
    border-top: 1px solid #e7e7e7;
}

/* 发送按钮样式 */
.btn-send {
    background-color: #4CAF50 !important; /* 增加饱和度并使用 !important 确保优先级 */
    color: white !important; /* 文字颜色为白色 */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    outline: none;
    box-shadow: 0 2px #333;
    transition: all 0.3s ease;
    width: 80px; /* 限制按钮宽度 */
    position: relative; /* 相对定位 */
    z-index: 1; /* 确保按钮在上层 */
}

.btn-send:hover {
    background-color: #45a049 !important; /* 增加饱和度并使用 !important 确保优先级 */
}
/* 回滚按钮样式 */
.btn-rollback {
    background-color: #f44336 !important; /* 增加饱和度并使用 !important 确保优先级 */
    color: white !important; /* 文字颜色为白色 */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    outline: none;
    box-shadow: 0 2px #b71c1c;
    transition: all 0.3s ease;
    width: 80px; /* 限制按钮宽度 */
    margin-left: 10px; /* 与发送按钮间隔 */
    position: relative; /* 相对定位 */
    z-index: 1; /* 确保按钮在上层 */
}

.btn-rollback:hover {
    background-color: #e53935 !important; /* 增加饱和度并使用 !important 确保优先级 */
}

/* 加载指示器样式 */
.spinner-border {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #4CAF50;
    animation: spin 1s linear infinite;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>


<script setup lang="ts">
import { computed, ref } from 'vue';
import { useIntelStore } from '@/store/console/intel';
import { usermsg, intelmsg, consoleApiModel } from '@/type/console/intelConsole';
import { showErrMsg, showSaveMsg } from '@/utils/message';
import * as interConsoleApi from '@/api/console/intelConsole';
import { useBasicStore } from '@/store/console/basic';
import { useScreenStore } from '@/store/console/screen';
import { useOptfastStore } from '@/store/console/optfast';
import { useLabStore } from '@/store/console/lab';

const userInput = ref('');
const isLoading = ref(false)
const intelConsole = useIntelStore();
const messages = computed(() => intelConsole.getmessages);
const basicStore = useBasicStore()
const screenStore = useScreenStore()
const optfastStore = useOptfastStore()
const labStore = useLabStore()

// intelConsole.clearMessage()
function checkLoading(im: intelmsg): boolean {
    return (im.opers == null || im.opers.length == 0)
}

function rollback(){
    interConsoleApi.rollback().then(
        (res) =>{
            const consoleData = res as unknown as consoleApiModel;
            basicStore.$patch({
                basicConsoleState: consoleData.console.basicConsole
            })
            screenStore.$patch({
                screenConsoleState: consoleData.console.screenConsole
            })
            optfastStore.$patch({
                optfastConsoleState: consoleData.console.optfastConsole
            })
            labStore.$patch({
                labConsoleState: consoleData.console.labConsole
            })
        }
    ).catch((error) =>{console.log(error);
    }) 
}

function clickToQuery() {
    userInput.value = userInput.value.replace(/\n/g, '');
    if (userInput.value == null || userInput.value == "" || userInput.value == '' || userInput.value == '%0A' ) {
        showErrMsg("输入不可为空")
        return
    }
    intelConsole.addMessage({ msg: userInput.value })
    isLoading.value = true
    interConsoleApi.searchOpers(userInput.value).then(
        (res) => {
            intelConsole.addMessage(res as intelmsg)
            isLoading.value = false
        }
    ).catch((error) => {
        isLoading.value = false;
        showErrMsg(error)
    });
    userInput.value = ""
}

function clickToConsole(id: string, value: string) {
    interConsoleApi.setConsole(id, value).then(
        (res) => {
            const consoleData = res as unknown as consoleApiModel;
            basicStore.$patch({
                basicConsoleState: consoleData.console.basicConsole
            })
            screenStore.$patch({
                screenConsoleState: consoleData.console.screenConsole
            })
            optfastStore.$patch({
                optfastConsoleState: consoleData.console.optfastConsole
            })
            labStore.$patch({
                labConsoleState: consoleData.console.labConsole
            })
            
        }
    )
    showSaveMsg()
}

function isUserMsg(msg: usermsg | intelmsg | null) {
    return msg !== null && msg !== undefined && (msg as usermsg).msg !== undefined;
}

function isIntelMsg(msg: usermsg | intelmsg | null): msg is intelmsg {
    return msg !== null && msg !== undefined && (msg as intelmsg).opers !== undefined;
}
</script>

<script lang="ts">
import { defineComponent } from 'vue';
import { RefSymbol } from '@vue/reactivity';

export default defineComponent({
    name: 'IntelSearchTest',
});
</script>